<template>
  <x-sub-page :isFixBtn="true">
    <div class="notice-list">
      <el-tabs type="border-card" v-model="sourceType">
        <el-tab-pane
          v-for="(item, index) in dictOptions['upms_notice.notice_type']"
          :name="item.value"
          :label="item.label"
          :key="index"
        ></el-tab-pane>
      </el-tabs>
      <div class="table-info" v-if="tableData.length > 0">
        <div v-for="item in tableData" :key="item.id" class="list-item" @click="goDetail(item)">
          <div class="left">
            <div class="month-year">
              <div class="month">{{ item.createTime.substring(5, 10) }}</div>
              <div class="yeah">{{ item.createTime.substring(0, 4) }}</div>
            </div>
            <div class="notice-title" :title="item.noticeTitle">{{ item.noticeTitle }}</div>
          </div>
          <i class="el-icon-caret-right" style="font-size: 16px; cursor: pointer" @click="goDetail(item)"></i>
        </div>
        <x-pagination
          :limit.sync="pagination.pageSize"
          :page.sync="pagination.pageNum"
          :total="pagination.total"
          @pagination="onPageChange"
        >
        </x-pagination>
      </div>
      <div v-else class="nodata">暂无数据</div>
    </div>

    <notice-detail ref="noticeDetailCom" />
    <fixed-btn-area>
      <el-button @click="handleBack()"> {{ $t('common.cancel') }} </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>
<script>
  import { TableListMixin, QueryDictMixin } from '@package/utils'
  import NoticeDetail from '../components/noticeDetail.vue'

  export default {
    name: 'NoticeCenter',
    components: { NoticeDetail },
    mixins: [TableListMixin, QueryDictMixin],
    data() {
      return {
        loading: false,
        sourceType: '1',
        tableData: [],
        listUrl: '/upms/notice/supplier/page',
        dictKeys: ['upms_notice.notice_type']
      }
    },
    computed: {
      otherParam() {
        return {
          noticeType: this.sourceType
        }
      }
    },
    watch: {
      sourceType: {
        handler(val) {
          this.loadData()
        },
        deep: true,
        immediate: false
      }
    },
    mounted() {},
    methods: {
      handleBack() {
        this.$router.go(-1)
      },
      // 详情
      goDetail(info) {
        this.$refs.noticeDetailCom.handleOpen(info)
      },
      onPageChange() {
        this.loadData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-scrollbar__bar.is-horizontal {
    height: 0 !important;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .notice-list {
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .nodata {
    padding: 16px;
  }
  .table-info {
    padding: 16px;
  }
  .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px dashed #e0e0e0;
    .notice-title {
      height: 20px;
      font-size: 16px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: calc(100% - 100px);
      cursor: pointer;
    }
    .left {
      width: calc(100% - 16px);
      display: flex;
      align-items: center;
    }
    .month-year {
      padding-right: 20px;
      border-right: 1px solid #e0e0e0;
      margin-right: 20px;
      width: 44px;
    }
    .month {
      font-size: 14px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #757575;
    }
    .year {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #757575;
    }
  }
  ::v-deep .el-tabs__nav-scroll {
    padding: 0 16px;
  }
  ::v-deep .el-tabs--border-card {
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: none;
    box-shadow: none;
    // border-bottom: none;
    // border-left: none;
    // border-right: none;
    border: none;
  }
  ::v-deep .el-tabs__content {
    display: none;
  }
</style>
